<template>
	<view>
		<!-- 选项卡 -->
		<view class="title_list">
			<view v-for="(item,index) in title_list" :key='index' :class="{active:ac_index==index}" @click="choose_index(index)">{{item}}</view>
		</view>
		<!-- //待支付 -->
		<view v-if="ac_index==1">
			<tobepay></tobepay>
		</view>
		<!-- //待收货 -->
		<view v-if="ac_index==2">
			<tobereceived></tobereceived>
		</view>
		<!-- //待点评 -->
		<view v-if="ac_index==3">
			<tobecommented></tobecommented>
		</view>
		<!-- //退款/完成-->
		<view v-if="ac_index==4">
			<refund></refund>
		</view>
	</view>
</template>

<script>
	import tobepay from './tobepay.vue'
	import tobereceived from './tobereceived.vue'
	import tobecommented from './tobecommented.vue'
	import refund from './refund.vue'
	export default{
		data(){
			return{
				title_list:['全部','待付款','待收货','待点评','退款/售后'],
				ac_index:0
			}
		},
		methods:{
			choose_index(index){
				this.ac_index = index
			}
		},
		components:{
			tobepay,
			tobereceived,
			tobecommented,
			refund
		}
	}
</script>
<style>
	page{
		background-color: #F7F7F7;
	}
</style>
<style scoped lang="less">
	.title_list{
		padding: 45rpx 24rpx;
		display: flex;
		justify-content: space-between;
		background: white;
		padding-bottom: 0;
		view{
			padding-bottom: 28rpx;			
			font-size: 30rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #8E8E8E;
		}
		.active{			
			font-size: 30rpx!important;
			font-family: PingFang;
			font-weight: bold!important;
			color: #00C6C2!important;
			border-bottom:  6rpx solid #00C6C2;
		}
	}
</style>
